<template>
  <div class="container">
    <div class="header">
      <NavBar title="意见反馈" left-arrow color="#333333" @click-left="back" @click-right="backHome">
        <template #right>
          <Icon name="wap-home-o" size="20" />
        </template>
      </NavBar>
    </div>
    <div class="main">
        <div class="line"></div>
        <div class="feedtype">
            <div class="title">请选择反馈类型</div>
            <div class="type-list flex align-items flex-start flex-wrap">
                <div class="item fn-ctr" :class="{active:current == idx}" v-for='(item,idx) in feedList' :key='idx' @click='current = idx'>{{ item }}</div>
            </div>
        </div>
        <div class="feedmain">
           <div class="title">请描述反馈问题</div>
           <div class="text-area">
              <Field
                  v-model="message"
                  rows="2"
                  autosize
                  type="textarea"
                  maxlength="50"
                  placeholder="请输入您的意见和建议，帮助我们改进和提供，谢谢！"
                  show-word-limit
                  size='large'
                ></Field>
           </div>
        </div>
        <div class="up-pic">
           <div class="title">添加反馈图片 <span>(可上传3张)</span> </div>
           <div class="up-list">
              <Uploader 
                 v-model="fileList"
                  multiple
                  :max-count="3" 
                  :afterRead='upAfter'
               ></Uploader>
           </div>
        </div>
        <div class="tips-box">
            <div class="user-tips">您在使用过程中遇到任何问题，还可在线 <span>联系客服</span></div>
            <div class="kefu-tips flex align-items flex-start">
                 <img :src="callPic" alt="">
                 <div class="txt">客服热线：4008208820</div>
            </div>
        </div>
        <div class="btns">
          <Button type='info' block @click='submit'>提交</Button>
        </div>
    </div>
  </div>
</template>

<script>
import { NavBar, Icon , Field , Uploader , Button , Dialog } from "vant";
import callPic from '@/assets/call.png';
import { upFile , submitFeedback } from '@/model/api';

export default {
    components: { NavBar, Icon , Field , Uploader , Button},
    data() {
        return {
            callPic,
            message:"",
            fileList:[],
            current:0,
        };
    },
    methods:{
      submit(){
        submitFeedback({
          type: this.current + 1,
          content: this.message,
          img_url: JSON.stringify(this.fileList.map( v => v.url)),
        }).then( res => {
          if (res.code == 1) {
              Dialog.alert({
                message:res.msg,
              }).then( () => {
                this.$router.go(-1)
              })
          } else {
              this.$toast(res.msg)
          }
        })
      },
      upAfter({file}){
          let formData = new window.FormData();
          formData.append("files",file);
          file.status = 'uploading';
          file.message =  '上传中...',
          this.$set(this.fileList,this.fileList.length - 1,file)
          upFile(formData,false).then( res => {
            file.status = 'done';
            file.message =  '';
            file.url = res;
            this.$set(this.fileList,this.fileList.length - 1,file)
          }).catch(()  => {
            file.status = 'failed';
            file.message =  '上传失败';
            this.$set(this.fileList,this.fileList.length - 1,file)
          })
      }
    },
    computed:{ 
        feedList(){
            return this.lang == 1 ? ['订单相关', '功能相关', '其他'] : ['корреляция заказов','функциональная корреляция','Прочее'] //反馈类型
        }
    }
};
</script>

<style lang="less" scoped>
    .container{
        background-color: #fff;
    }
    
    .line{
        width: 100%;
        height: 5px;
        background: #F7F7F7;
    }
    .tips-box{
      width: 100%;
      height: auto;
      padding: 15px 13px;
      background-color: #F7F7F7;
      .user-tips{
        width: 100%;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #9A9A9A;
        margin-bottom: 10px;
        span{
          color: #FC4747;
        }
      }
      .kefu-tips{
        width: 100%;
        height: auto;
        img{
          width: 12px;
          height: 12px;
          margin: 0;
          margin-right: 5px;
        }
        .txt{
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #9A9A9A;
        }
      }
    }
    .feedtype{
        width: 100%;
        height:auto; 
        padding: 0 14px;
        .type-list{
          width: 100%;
          height: auto;
          .item{
            width: 85px;
            height: 31px;
            background: #EFEFEF;
            border-radius: 3px;
            margin-right: 15px;
            margin-bottom: 15px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #9A9A9A;
          }
          .active{
            background: #5652FF;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
          }
        }
    }
    .title{
      width: 100%;
      padding: 20px 0 15px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #666666;
      span{
         font-size: 12px;
        color: #999;
      }
    }
    .feedmain{
      width:100%;
      height: auto;
      padding: 0 14px;
      .text-area{
        width: 100%;
        height: auto;
        border: 1px solid #EAEAEA;
        border-radius: 3px;
      }
    }
    .up-pic{
      width: 100%;
      height:auto;
      padding: 0 14px;
    }
    .btns{
      width: 100%;
      padding: 10px 14px;
    }
</style>